AI Assistant Pro - Documentation

Table of Contents

• Editing Text & Images
• Changing Colors & Styles
• Customizing Components
• Social Media Icons
• Additional Customization

1. Editing Text & Images

All text content can be found in the index.html file. To modify:

• Open index.html in your code editor
• Find the section you want to edit (sections are clearly commented)
• Update the text within the HTML tags

Updating Images

<img src="path/to/your/image.jpg" alt="Descriptive text">

2. Changing Colors & Styles

Colors and styles are defined in css/styles.css using CSS variables:

:root {
    --primary-color: #6366f1;
    --secondary-color: #ec4899;
    --accent-color: #06b6d4;
    /* Add more custom colors here */
}

3. Customizing Components

Email Input Customization

The email input styling can be modified in css/styles.css:

.newsletter-form input {
    padding: 1rem 1.25rem;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    /* Add custom styles */
}

Dark Mode Toggle

The dark mode toggle button can be customized:

.dark-mode-toggle {
    width: 40px;
    height: 40px;
    border: 2px solid var(--gray-200);
    /* Modify appearance */
}

4. Replacing the X (Twitter) Logo

The X logo is implemented as an SVG in x-logo.svg. To update:

1. Replace the x-logo.svg file with your custom version
2. Update the HTML in index.html:

<img src="x-logo.svg" alt="X (formerly Twitter)" class="social-icon x-icon">

5. Additional Customization

Responsive Breakpoints

The template uses these breakpoints:

• Mobile: max-width: 768px
• Tablet: max-width: 992px
• Desktop: min-width: 993px

Adding Custom Fonts

To use custom fonts:

1. Add font imports to <head> in index.html
2. Update the font variables in css/styles.css:

:root {
    --body-font: 'Your Font', sans-serif;
    --heading-font: 'Your Heading Font', sans-serif;
}